<template>
  <section class="panel ">
    <header class="panel-heading">新增商品</header>
    <div class="panel-body ">
      <form>
        <div class="form-group">
          <label style="magin-top:7px">商品分类</label>
          <select v-model="category" class="goods-category-select">
            <!--            <option :value="item.id">{{i.name}}</option>-->
            <option v-for="item in categorys" :value="item.id">{{ item.name }}</option>
          </select>
        </div>
        <div class="form-group">
          <label>商品名称</label>
          <input type="text" class="form-control" v-model="goodsName">
        </div>
        <div class="form-group">
          <label>商品价格</label>
          <input v-model="price" type="password" class="form-control">
        </div>
        <div class="form-group">
          <label>商品图片</label>
          <input type="file" @change="uploadPhoto($event)">
        </div>
        <div style="height:20px"></div>
        <div class="form-group">
          <label>商品详情</label>
          <input v-model="comments" type="text" class="form-control" style="height:60px">
        </div>

        <div style="width: 480px; height: 100px; margin: 20px auto;">
          <div class="input-num">
            <button  @click="submitGoodsMessage">保存</button>
            <!--            <button type="submit" >保存</button>-->
            <span></span>
            <button @click="showGoodsList">取消</button>
          </div>
        </div>
      </form>


    </div>
  </section>
</template>


<script>

module.exports = {
  mounted: function () {
    axios.get("/categorylist").then((response) => {
      this.categorys = response.data;
      this.goodsId = this.addgoodid;
    });
  },
  props:['addgoodid'],
  data() {
    return {
      goodsId:null,
      categorys: {},
      category: 1,
      goodsName: "",
      price: "",
      imgUrl: "",
      comments: ""
    }
  },
  methods: {

    submitGoodsMessage() {
      axios.get("/goodsupdate", {
        params: {
          goodsId: this.goodsId,
          category: this.category,
          goodsName: this.goodsName,
          price: this.price,
          imgUrl: this.imgUrl,
          comments: this.comments
        }
      }).then((response) => {
        this.goodsId = null;
        // 后端传递给前端的数据在 response.data 中
        if (response.data == "OK") {
          // alert("添加成功！")
        }
      });
      this.goodsId = null;
      this.$emit("show-me-goods", 2);
    },

    showGoodsList() {
      this.$emit("show-me-goods", 1);
    },

    uploadPhoto(event) {
      console.log(event)
      var file = event.target.files[0];
      var suffix = file.name.substr(file.name.indexOf("."));
      var storeAs = this.timestamp() + suffix;
      console.log(file.name + ' => ' + storeAs);
      this.imgUrl = storeAs;
      var client = new OSS.Wrapper({
        region: 'oss-cn-hangzhou',
        accessKeyId: 'LTAI5tBANrWn6fiC6m6b9cXC',
        accessKeySecret: 'jBgk1kjvMIhsUW3a6nv8iha8YSyCnI',
        bucket: 'gao8847'
      });
      client.multipartUpload(storeAs, file).then(function (result) {
        console.log(result);
      }).catch(function (err) {
        console.log(err);
      });
    },
    timestamp() {
      var time = new Date();
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return "" + y + this.add0(m) + this.add0(d) + this.add0(h) + this.add0(mm) + this.add0(s);
    },
    add0(m) {
      return m < 10 ? '0' + m : m;
    }
  }
}

</script>

<style scoped>
.panel {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  font-family: 'Lato', sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  display: block;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 4px;
  border: none;
  box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
}

.panel-heading {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  font-family: 'Lato', sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  position: relative;
  max-height: 100px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom: 1px solid #eee;
  background-color: #FAFAFA;
  z-index: 1 !important;
  padding: 10px 15px;
  text-transform: uppercase;
}

.panel-body {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  font-family: 'Lato', sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  padding: 15px;
  background-color: rgb(255, 255, 255);
}

.form-group {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  font-family: 'Lato', sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  margin-bottom: 27px;
}


.btn btn-info {
  width: 172px;
  height: 100%;
  font-size: 24px;
  color: gray;
  cursor: pointer;
  border: none;
  outline: none;
  background-color: black;
}


.form-control {
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  margin: 0px;
  font-family: inherit;
  display: inline-block;
  width: 78%;
  height: 56px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  color: rgb(85, 85, 85);
  background-color: rgb(255, 255, 255);
  background-image: none;
  border: 1px solid rgb(204, 204, 204);
  border-radius: 4px;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s, -webkit-box-shadow 0.15s ease-in-out 0s;
  box-shadow: none;
}

label {
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-size: 22px;
  line-height: 1.42857;
  color: rgb(51, 51, 51);
  font-family: Lato, sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  display: inline-block;
  max-width: 98%;
  font-weight: 500;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  float: left;
  width: 11.6667%;
  padding-top: 7px;
  margin-bottom: 0px;
  text-align: inherit;
}

select {
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  font-style: inherit;
  font-variant: inherit;
  font-stretch: inherit;
  margin: 0px 0px 10px;
  text-transform: none;
  font-family: inherit;
  display: block;
  width: 11%;
  color: rgb(85, 85, 85);
  background-color: rgb(255, 255, 255);
  background-image: none;
  border: 1px solid rgb(204, 204, 204);
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s, -webkit-box-shadow 0.15s ease-in-out 0s;
  padding: 10px 16px;
  font-size: 20px;
  border-radius: 2px;
  box-shadow: none;
  height: 47px;
  background-color: #d3d3d345;
}

option {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-font-smoothing: antialiased;
  font: inherit;
  text-transform: none;
  font-family: inherit;
  color: #555;
  font-size: 18px;
  line-height: 46px;
  box-sizing: border-box;
}

.input-num {
  margin-top: 31px;
  height: 41%;
  display: flex;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 4px transparent;
  margin-top: 60px;
  border-radius: 5px;
}

.input-num button {
  width: 172px;
  height: 100%;
  font-size: 24px;
  color: gray;
  cursor: pointer;
  border: none;
  outline: none;
  background-color: #2b2121;
  border-radius: 5px;
}
</style>